<%--
  Created by IntelliJ IDEA.
  User: ZhuChunXiao
  Date: 2018/3/29
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  String realPath = request.getServletContext().getRealPath("/");
  String newPath = realPath.replace('\\', '/');
  String jsessionid = session.getId();
%>

<div id="page-content">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel">
        <div class="panel-heading">
          <h3 class="panel-title">数据导入</h3>
        </div>

        <div class="panel-body">
          <form class="form-horizontal" id="import_form" method="post">
            <input name="filepath" id="filepath" type="hidden" value="" />

            <div class="form-group">
              <label class="col-md-2 control-label">请选择人员类型<i class="fa fa-asterisk txt-color-red"></i></label>
              <div class="col-md-6">
                <select name="userType" id="userType" class="form-control">
                  <option value="">请选择</option>
                  <option value="person">书记</option>
                  <option value="director">主任</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2 control-label">请上传文件</label>
              <div class="col-md-6">
                <input name="uploadify" id="file_upload_excel" placeholder="" type="file" style="display: none">
                <input name="excelId" id="excelId" style="display: none" value="">
                <div id="import_message_alert" style="max-width:350px">

                </div>
              </div>
            </div>

          </form>
        </div>

        <%--<div class="panel-footer">--%>
          <%--<a class="btn btn-success" id="btn-submit" href="javascript:void(0)">--%>
            <%--<i class="fa fa-lg fa-arrow-down"></i> 开始导入--%>
          <%--</a>--%>
        <%--</div>--%>

      </div>
    </div>
  </div>
</div>

<script>

  $(function(){
    fn_dateOut_input_validate();
  });

  $("#userType").change(function(){
    $("#file_upload_excel").show();
    $("#file_upload_excel").uploadify({
      height        : 30,
      multi :false,
      fileSizeLimit : '10MB',
      fileDataName : 'uploadify',
      progressData : 'percentage',
      fileTypeDesc : '格式:zip',     //描述
      fileTypeExts : '*.zip',
      buttonText : '选择压缩文件上传',
      swf           : '../resource/core/plugins/uploadify/uploadify.swf',
      uploader      : "<%=path%>/com/dataUpdate/importData;jsessionid=<%=jsessionid%>",
      formData:{'userType':$("#userType option:selected").val()},
      width         : 140,
      onUploadStart:function(file){
        $("#import_message_alert").empty();
        $('<div class="alert alert-info fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-info"></i><strong>正在努力为您处理！</strong> 导入过程分校验和导入两部分，请耐心等待...</div>').appendTo($("#import_message_alert"));
      },
      onUploadProgress : function(file, fileBytesLoaded, fileTotalBytes){
        $("#import_message_alert").empty();
        $('<div class="alert alert-success fade in">&nbsp;提示：正在处理数据，请稍后<img src="../resource/core/img/loading.gif"/></div>').appendTo($("#import_message_alert"));
      },
      onUploadSuccess : function(file, data, response) {
        $("#import_message_alert").empty();
        var json = jQuery.parseJSON(data);
        if(json && json.state == 1){
          $('<div class="alert alert-success fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-check"></i><strong>上传完毕</strong> 数据导入成功！</div>').appendTo($("#import_message_alert"));
        }else{
          $('<div class="alert alert-info fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-info"></i><strong>上传失败！</strong> 可能文件内数据格式不正确！</div>').appendTo($("#import_message_alert"));
          $('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>错误原因：</strong> '+json.message+'</div>').appendTo($("#import_message_alert"));
        }
      }
    });
  });



  $("#userType").select2({
    placeholder: "请选择人员类型",
    allowClear: true
  });

  function fn_dateOut_input_validate(){
    __init_validate('import_form', {
      rules : {
        userType : {
          required : true
        }
      },
      messages : {
        userType : {
          required : "请选择人员类型"
        }
      }
    });
  }

  $("#file_upload_excel").click(function(){
    if (!$('#import_form').valid()) {
      __toastr_error("请检查基本信息");
      return false;
    }

  });

  $("#btn-submit").click(function(){
    alert($("#file_upload_excel").val());
  });

</script>